<template>
    <footer>
        <div @click="jumpUrl(menu.url)" class="item" v-for="menu in menus" :key="menu.id">
            {{ menu.title }}
        </div>
    </footer>
</template>

<script>
export default {
    data() {
        return {
            menus: [
                { id: 1, title: "正在热映", url: "/nowplaying" },
                { id: 2, title: "即将上映", url: "/commingsoon" },
                { id: 3, title: "影院", url: "/cinemas" },
                { id: 4, title: "我的", url: "/mine" },
            ],
        };
    },
    methods: {
        jumpUrl(_url) {
            this.$router.push(_url);
        },
    },
};
</script>

<style lang="less" scoped>
@import "../assets/Less/common.less";

footer {
    height: 49px;
    background-color: #fff;
    border-top: 1px solid @main_color;
    color: @main_color;
    .flex();
    .position(fixed, auto, 0, 0, 0);

    .item {
        font-size: @mini_font_size;
        flex: 4;
        text-align: center;
    }
}
</style>
